<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>修改博客</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css">
		<link rel="stylesheet" type="text/css" href="css/editormd.css" />
		<link rel="stylesheet" type="text/css" href="css/blogWrite.css" />
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/editormd.js"></script>
	</head>

	<body>
		<div id="row blog-container">
			<div class="col-8 offset-2">
				<hr>
				<div class="blog-info">
					<form>
						<input th:value="${blog.btitle}" id="blog_title" class="form-control" type="text" placeholder="博客标题" required="required"/>
						<textarea th:text="${blog.bdesc}" id="blog_desc" rows="5" cols="60" class="form-control" placeholder="博客简述" required="required"></textarea>
						<!-- blog id -->
						<input type="hidden" th:value="${blog.id}" id="blog_id">
						<div class="form-control" style="height: 100px;margin: 10px auto">
							<label for="blog_type" class="blog-typelabel">博客分类</label>
							<select data-toggle="select" id="blog_type" class="form-control select select-primary select-container">
								<option th:each="blogTypeList:${blogTypeList}" th:value="${blogTypeList.id}" th:text="${blogTypeList.btypename}" th:selected="(${blog.btype_id} == ${blogTypeList.id})">分类1</option>
							</select>
							<input class="btn btn-success" id="btn_blog_save" type="button" value="发表博客" />
						</div>
						<div id="blog-write-editormd" class="blog-show">
							<textarea style="display:none;" name="editormd-markdown-doc" th:text="${blog.bcontent}"></textarea>
						</div>
					</form>
				</div>
				<hr>
			</div>
		</div>

		<script type="text/javascript">
			var blogEditor;
			$(function() {
				blogEditor = editormd("blog-write-editormd", {
					width: "100%",
					height: 720,
					path: 'lib/',
					codeFold: true,
					syncScrolling: true,
					saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
					searchReplace: true,
					htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启    
					emoji: true,
					taskList: true,
					tocm: true, // Using [TOCM]
					tex: true, // 开启科学公式TeX语言支持，默认关闭
					flowChart: true, // 开启流程图支持，默认关闭
					sequenceDiagram: true, // 开启时序/序列图支持，默认关闭,
					imageUpload: true,
					imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
					imageUploadURL: "mkImageUpload" // 图片上传接口
				});

				/**
				 * 修改博客提交
				 */
				$('#btn_blog_save').on("click",function () {
					var id = $('#blog_id').val().trim();
					var btitle = $('#blog_title').val().trim();
					var bdesc = $('#blog_desc').val().trim();
					var btype_id = $('#blog_type').val().trim();
					var bcontent = blogEditor.getMarkdown();
					if (btitle=="" || bdesc=="" || bcontent==""){
						alert("博客内容不能为空");
						return false;
					}
					console.log("表单信息："+id+","+btitle+","+bdesc+","+btype_id+","+bcontent);
					var form_changeBlog = {
						id: id,
						btitle: btitle,
						bdesc: bdesc,
						btype_id: btype_id,
						bcontent: bcontent
					}
					$.ajax({
						url: 'changeBlog',
						type: "POST",
						data: form_changeBlog,
						dataType: 'json',
						success: function (msg) {
							console.log(msg);
							if (msg.resCode == 1) {
								alert(msg.resultMsg);
								window.location.href = "userInfo";
							} else {
								alert(msg.resultMsg);
							}
						},
						error: function (e) {
							alert("错误：" + e);
						}
					});
				});


			});
		</script>

	</body>

</html>
